<template>
	<view style="background-color: #efeff4;" class="productsLists">
		<view class="top">
			<view @click="sortType(0)" :class="flag01 == true ? 'active11':'C333'">综合排序</view>
			
			<view @click="sortType(1)" v-if="flag11">
				<text>销量</text>
				<image class="sjx" src="@/static/images/sjx.jpg" mode=""></image>				
			</view>
			<view @click="sortType(1)" v-if="flag12">
				<text class="active11">销量</text>
				<image class="sjx" src="@/static/images/sjx_sx.jpg" mode=""></image>				
			</view>
			<view @click="sortType(1)" v-if="flag13">
				<text class="active11">销量</text>
				<image class="sjx" src="@/static/images/sjx_jx.png" mode=""></image>				
			</view>

			<view @click="sortType(2)" v-if="flag21">
				<text>价格</text>
				<image class="sjx" src="@/static/images/sjx.jpg" mode=""></image>									
			</view>
			<view @click="sortType(2)" v-if="flag22">
				<text class="active11">价格</text>
				<image class="sjx" src="@/static/images/sjx_sx.jpg" mode=""></image>					
			</view>
			<view @click="sortType(2)" v-if="flag23">
				<text class="active11">价格</text>
				<image class="sjx" src="@/static/images/sjx_jx.png" mode=""></image>					
			</view>

			<view @click="sortBox()">筛选</view>
		</view>
		
		<view class="lists">
			<view @click="toDetail(item.goods_id)" class="product" v-for="(item,index) in lis" :key="index">
				<view v-if="item.promotion_type == 'groupbuy'" class="zk">抢购 </view>
				<view v-if="item.promotion_type == 'xianshi'" class="zk">限时折扣</view>
				<view v-if="item.promotion_type == 'miaosha'" class="zk">秒杀</view>
				<view v-if="item.promotion_type == 'zhijiang'" class="zk">直降</view>
				<view v-if="item.promotion_type == 'teijia'" class="zk">特价</view>
				<view v-if="item.promotion_type == 'repur'" class="zk">满额加价购</view>
				<view v-if="item.promotion_type == 'spellgroup'" class="zk">拼团</view>				
				<view v-if="item.promotion_type == 'bargain'" class="zk">砍价</view>
				<image :src="item.goods_image_url" mode=""></image>
				<view class="ms">{{item.goods_name}}</view>
				<view style="display: flex;justify-content: space-between;" class="lastLine">
					<text class="lastLine1">￥{{item.goods_price}}</text>				
					<text class="lastLine2">销量：{{item.goods_salenum}} </text>
					<text @click.stop="toStore()" class="lastLine3">进店</text>
				</view>
			</view>
			
			<view @tap="hidden()" v-if="flag1" @touchmove.stop.prevent="moveHandle" class="sxMask">
				<view @tap.stop class="innerMask">
					<view class="innerMaskTop">
						<text>筛选<image class="sx" src="../static/images/sx.jpg" mode=""></image></text>
					</view>
					<view class="innerMaskCenter">
						<view v-if="pplis.length > 0" class="innerMaskCenterT">
							<text class="fl fs18 bold">品牌</text>
							<text class="fr fs18 C999">全部<image class="xj" src="../static/images/xj.jpg" mode=""></image></text>
						</view>
						<view v-if="pplis.length > 0" class="pplis" >
							<text v-if="index <= pplisLong" :class="[(active1 == index) ? 'active1':'']" @click="activeColor(index,item.brand_id)" v-for="(item,index) in pplis" :key="index"  class="ppli">{{item.brand_name}}</text>							
						</view>
						<view class="innerMaskCenterT mt">
							<text class="fl fs18 bold">价格</text>
						</view>
						<view class="jgInput"> 
							  <input v-model="minPrice" type="text" class="fs18" maxlength="11"  placeholder="最低价"  />  
							   <text class="inputC">-</text>
							   <input v-model="maxPrice" class="fs18" type="text" maxlength="11" placeholder="最高价" /> 							    
						</view>
						
						<view style="display: none;" class="innerMaskCenterT mt">
							<text class="fl fs18 bold">商品分类</text>
							<text class="fr fs18 C999">全部<image class="xj" src="../static/images/xj.jpg" mode=""></image></text>
						</view>
						<view style="display: none;" class="ppfllis">
							<text :class="[(active2 == index) ? 'active1':'']" @click="activeColor2(index)" v-for="(item,index) in ppfllis" :key="index" class="ppflli">
									{{item.name}}
							</text>			
						</view>
						
					</view>
					<view class="innerMaskBottom">
						<button @click="reset()" class="fl innerMaskBottom1">重置</button>
						<button @click="ok()" class="fr innerMaskBottom2">确定</button>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:"",
				hasmore:false,
				curpage:1,
				store_id:"",
				PPID:"",
				searchValue:'',
				keyword:"",
				thirdid:"",
				active1:0,
				active2:2,
				flag1:false,
				flag01:true,
				xlNum:0,
				jgNum:0,
				flag11:true,
				flag12:false,
				flag13:false,
				flag21:true,
				flag22:false,
				flag23:false,
				pplis:[],
				pplisLong:16,
				minPrice:"",
				maxPrice:"",
				pinpaiId:'',
				ppfllis:[
					{"name":"户外运动"},
					{"name":"户外运动"},
					{"name":"户外运动"},
					{"name":"户外运动"},
					{"name":"户外运动"},
					{"name":"户外运动"},
				],
				lis:[]
			}
		},		
		onLoad(options) {
			//index.php?act=store&op=list_app
			//keyword
			//curpage
			this.store_id=options.store_id
			this.PPID=options.PPID;
			this.keyword=options.index;
			this.thirdid=options.thirdid;
			if(this.PPID == undefined){
				this.PPID=0
			}
			if(this.PPID){
				this.title=options.name
				this.$util.request({
					url:'/mobile/index.php?act=goods&op=goods_list',
					method: 'get',
					data: {
						"store_id":this.store_id,
						"gc_id":this.PPID,
						"curpage":this.curpage
					},
				}).then(res=>{			
						this.lis=res.datas.goods_list	
						if(res.error_code == 10002){
							uni.showToast({
								title:"没有您搜索的分类商品哟～",
								icon:"none"
							})
						}
						this.hasmore=res.datas.page.hasmore
				})
			}else{
				this.title=options.index
				this.$util.request({
					url: '/mobile/index.php?act=goods&op=goods_list',
					method: 'get',
					data: {
						"store_id":this.store_id,
						"keyword":this.keyword,
						"curpage":this.curpage
					},
				}).then(res=> {					
					this.lis=res.datas.goods_list
					if(res.datas.goods_list.length == 0){
						uni.showToast({
							title:"没有您搜索的商品哟～",
							icon:"none"
						})
					}
					this.hasmore=res.datas.page.hasmore
				})
			}

			// this.getLis()
			uni.setNavigationBarTitle({
			    title:this.title
			});
			
		},
		onReachBottom() {
			if(this.hasmore){
				if(this.keyword){
					this.$util.request({
						url: '/mobile/index.php?act=goods&op=goods_list',
						method: 'get',
						data: {
							"store_id":this.store_id,
							"keyword":this.keyword,
							"curpage":this.curpage
						},
					}).then(res=> {					
						this.lis=this.lis.concat(res.datas.goods_list) 
						if(res.datas.goods_list.length == 0){
							uni.showToast({
								title:"没有您搜索的商品哟～",
								icon:"none"
							})
						}
						this.hasmore=res.datas.page.hasmore
					})
				}else{
					this.$util.request({
						url: '/mobile/index.php?act=goods&op=goods_list',
						method: 'get',
						data: {
							"store_id":this.store_id,
							"gc_id":this.PPID,
							"curpage":this.curpage
						},
					}).then(res=> {					
						this.lis=this.lis.concat(res.datas.goods_list) 
						if(res.datas.goods_list.length == 0){
							uni.showToast({
								title:"没有您搜索的商品哟～",
								icon:"none"
							})
						}
						this.hasmore=res.datas.page.hasmore
					})
				}
			}
		},
		methods: {
			toStore(){
				uni.navigateTo({
					url:"/mall/store/store?store_id="+this.store_id
				})
			},
			ok(){		
				var that=this;
				if(this.keyword){
					this.$util.request({
						url: '/mobile/index.php?act=goods&op=goods_list',
						method: 'get',
						data: {
							"store_id":this.store_id,
							"keyword":this.keyword,
							"price_from":that.minPrice,
							"price_to":that.maxPrice						
						},
					}).then(function(res) {					
						console.log("条件筛选")
						console.log(res)	
						that.lis=res.datas.goods_list;
						that.flag1=false;
						if(res.datas.goods_list.length == 0){
							uni.showToast({
								title:"没有筛选结果",
								icon:"none"
							})				
						}
					})
				}else{
					this.$util.request({
						url: '/mobile/index.php?act=goods&op=goods_list',
						method: 'get',
						data: {
							"store_id":this.store_id,
							"gc_id":this.PPID,
							"price_from":that.minPrice,
							"price_to":that.maxPrice						
						},
					}).then(function(res) {					
						console.log("条件筛选")
						console.log(res)	
						that.lis=res.datas.goods_list;
						that.flag1=false;
						if(res.datas.goods_list.length == 0){
							uni.showToast({
								title:"没有筛选结果",
								icon:"none"
							})				
						}
					})
				}
				
			},
			reset(){
				this.minPrice="";
				this.maxPrice="";
				this.active1=null	
			},
			sortBox(){
				
				this.flag1=!this.flag1;
				var that=this
				
				品牌列表
				this.$util.request({
					url: '/mobile/index.php?act=brand&op=list',
					method: 'get',
					data: {
						"class_id":that.thirdid
					},
				}).then(function(res) {					
					console.log("品牌列表")
					console.log(res)
					that.pplis=res.datas
				
				})
			},
			toDetail(id){
				uni.navigateTo({
					url:"/mall/goods/info?goods_id="+id
					
				})
			},
			
			activeColor(index,id){
				this.pinpaiId=id
				this.active1=index				
			},
			activeColor2(index){
				console.log(index)
				this.active2=index				
			},
			hidden(){
				this.flag1=!this.flag1
			},
			
				sortType(index){
					if(!this.keyword){
		
					var that=this
					console.log(index)
					if(index == 0){
						this.flag01=true
						this.flag11=true;
						this.flag12=false;
						this.flag13=false;
						this.flag21=true;
						this.flag22=false;
						this.flag23=false;					
						this.$util.request({
							url: '/mobile/index.php?act=goods&op=goods_list',
							method: 'get',
							data: {	
								"store_id":this.store_id,											
								"gc_id":this.PPID,							
								"key":"4",
								"order":"1"
							},
						}).then(function(res) {
							that.lis=res.datas.goods_list
							console.log(that.lis)
						})
					}
					if(index == 1){
						this.flag01=false
						this.flag21=true;
						this.flag22=false;
						this.flag23=false;
						this.xlNum++;
				
						if(this.xlNum%2==0){
							console.log("销量升序");
							this.flag11=false;
							this.flag12=true;
							this.flag13=false;
					
							this.$util.request({
								url: '/mobile/index.php?act=goods&op=goods_list',
								method: 'get',
								data: {		
									"store_id":this.store_id,
									"gc_id":this.PPID,	
									"key":"1",
									"order":"1"		
								},
							}).then(function(res) {
								that.lis=res.datas.goods_list
								console.log(that.lis)
							})
							
						}
						if(this.xlNum%2==1){
							console.log("销量降序");
							this.flag11=false;
							this.flag12=false;
							this.flag13=true;
						
							this.$util.request({
								url: '/mobile/index.php?act=goods&op=goods_list',
								method: 'get',
								data: {		
									"store_id":this.store_id,
									"gc_id":this.PPID,	
									"key":"1",
									"order":"0"
								},
							}).then(function(res) {
								that.lis=res.datas.goods_list
								console.log(that.lis)
							})
						}										
					}
					if(index == 2){
						this.flag01=false
						this.flag11=true;
						this.flag12=false;
						this.flag13=false;					
						this.jgNum++;
				
						if(this.jgNum%2==0){
							console.log("价格升序");
							this.flag21=false;
							this.flag22=true;
							this.flag23=false;
							this.$util.request({
								url: '/mobile/index.php?act=goods&op=goods_list',
								method: 'get',
								data: {	
									"store_id":this.store_id,
									"gc_id":this.PPID,	
									"key":"3",
									"order":"1"
								},
							}).then(function(res) {
								that.lis=res.datas.goods_list;
								console.log(that.lis)
							})
						}
						if(this.jgNum%2==1){
							console.log("价格降序");
							this.flag21=false;
							this.flag22=false;
							this.flag23=true;	
							this.$util.request({
								url: '/mobile/index.php?act=goods&op=goods_list',
								method: 'get',
								data: {		
									"store_id":this.store_id,
									"gc_id":this.PPID,	
									"key":"3",
									"order":"0"						
								},
							}).then(function(res) {
								that.lis=res.datas.goods_list
								console.log(that.lis)
							})
						}										
					}
				}else{
					var that=this
					console.log(index)
					if(index == 0){
						this.flag01=true
						this.flag11=true;
						this.flag12=false;
						this.flag13=false;
						this.flag21=true;
						this.flag22=false;
						this.flag23=false;					
						this.$util.request({
							url: '/mobile/index.php?act=goods&op=goods_list',
							method: 'get',
							data: {	
								"store_id":this.store_id,											
								"keyword":this.keyword,							
								"key":"4",
								"order":"1"
							},
						}).then(function(res) {
							that.lis=res.datas.goods_list
							console.log(that.lis)
						})
					}
					if(index == 1){
						this.flag01=false
						this.flag21=true;
						this.flag22=false;
						this.flag23=false;
						this.xlNum++;
									
						if(this.xlNum%2==0){
							console.log("销量升序");
							this.flag11=false;
							this.flag12=true;
							this.flag13=false;
					
							this.$util.request({
								url: '/mobile/index.php?act=goods&op=goods_list',
								method: 'get',
								data: {		
									"store_id":this.store_id,
									"keyword":this.keyword,
									"key":"1",
									"order":"1"		
								},
							}).then(function(res) {
								that.lis=res.datas.goods_list
								console.log(that.lis)
							})
							
						}
						if(this.xlNum%2==1){
							console.log("销量降序");
							this.flag11=false;
							this.flag12=false;
							this.flag13=true;
						
							this.$util.request({
								url: '/mobile/index.php?act=goods&op=goods_list',
								method: 'get',
								data: {		
									"store_id":this.store_id,
									"keyword":this.keyword,
									"key":"1",
									"order":"0"
								},
							}).then(function(res) {
								that.lis=res.datas.goods_list
								console.log(that.lis)
							})
						}										
					}
					if(index == 2){
						this.flag01=false
						this.flag11=true;
						this.flag12=false;
						this.flag13=false;					
						this.jgNum++;
									
						if(this.jgNum%2==0){
							console.log("价格升序");
							this.flag21=false;
							this.flag22=true;
							this.flag23=false;
							this.$util.request({
								url: '/mobile/index.php?act=goods&op=goods_list',
								method: 'get',
								data: {	
									"store_id":this.store_id,
									"keyword":this.keyword,	
									"key":"3",
									"order":"1"
								},
							}).then(function(res) {
								that.lis=res.datas.goods_list;
								console.log(that.lis)
							})
						}
						if(this.jgNum%2==1){
							console.log("价格降序");
							this.flag21=false;
							this.flag22=false;
							this.flag23=true;	
							this.$util.request({
								url: '/mobile/index.php?act=goods&op=goods_list',
								method: 'get',
								data: {		
									"store_id":this.store_id,
									"keyword":this.keyword,	
									"key":"3",
									"order":"0"						
								},
							}).then(function(res) {
								that.lis=res.datas.goods_list
								console.log(that.lis)
							})
						}										
					}
					
				}
			}
			
			
			

		}
	}
</script>

<style>
	uni-page-body {
		background-color: #efeff4;
		color: rgb(102, 102, 102);
	}
	
	.top{
		border-top: 3px #f5f5f5 solid;
		background-color: #FFFFFF;
		height: 80upx;
		line-height: 80upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0 32upx;
	}
	.top>view{
		height: 80upx;
		line-height: 80upx;
		/* font-size: 21upx; */
		font-size:30upx;
	}
	.top image{
		width: 35upx;
		height: 35upx;
	}
	.fe0000{
		color: #ff4300;
	}
	.sjx{
		position: relative;
		top: 8upx;
		width: 30upx;
		height: 30upx;
	}
	.lists{
		background-color: #efeff4;
		/* height: 100vh; */
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 21upx;
		/* height: 100%; */
		/* min-height: 100vh; */
		
	}
	.product{
		position: relative;
		box-sizing: border-box;
		text-align: center;
		border-radius: 10upx;
		margin-bottom: 21upx;
		width: 350upx;
		height: 488upx;
		background-color: #fff;
		padding-top: 10upx;

	}
	.product image{
		border-top-left-radius: 10upx;
		border-top-right-radius: 10upx;		
		width: 326upx;
		height: 326upx;
		margin: 0 auto;
	}
	.zk{
		/* width: 80upx; */
		padding: 0 15upx;
		height: 40upx;
		background-color:#ff4300;
		color: #FFFFFF;
		text-align: center;
		line-height: 40upx;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		border-top-left-radius: 10upx;		
	}
	.ms{
		min-height: 64upx;
		text-align: left;
		color: black;
		padding:0 12upx;
		line-height: 35upx;
		/* font-size: 18upx; */
		font-size: 27upx;
		overflow : hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;		
	}
	.lastLine{		
		height: 30upx;
		line-height: 30upx;
		margin-top: 10upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0 5px;
		padding-top: 10upx;
	}
	.lastLine1{		
		color: #ff4300;
		font-size: 30upx	
		/* font-size: 21upx	 */
	}
	.lastLine2{
		color: #000000;
		font-size: 20upx
		/* font-size: 12upx */
	}
	.lastLine3{
		padding: 0upx 10upx;
		color: #000000;
		font-size:27upx
		/* font-size: 18upx */
	}
	
	/* 筛选 */
	.sxMask{
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background-color: rgba(0,0,0,0.3);
		z-index: 100000;
	}
	.innerMask{
		width: 598upx;
		height: 1192upx;
		background-color: #fff;
		position: absolute;
		right: 0;
		bottom: 0;
		z-index: 100000;
	}
	.innerMaskTop{
		padding:0 28upx;
		height: 83upx;
		line-height: 83upx;
		background-color: #fafafa;
		font-size: 30upx
		/* font-size: 21upx */
	}
	.innerMaskCenterT{
		height: 80upx;
		line-height: 80upx;
		padding: 0 28upx;
	}
	.bold{
		font-weight: bold;
	}
	.C999{
		color: #999999;
	}
	.C333{
		color: #333333;
	}
	.fl{
		float: left;
	}
	.fr{
		float: right;
	}
	.fs18{
		font-size: 18upx;
	}
	.fs21{
		font-size: 21upx
	}
	.pplis{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0 28upx;
		flex-wrap: wrap;
	}
	.ppli{
		margin-top: 20upx;
		padding: 5upx 60upx;
		/* font-size: 18upx; */
		font-size: 27upx;
		background-color: #f0f2f5;
		border-radius: 5upx;
	}
	.ppfllis{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0 28upx;
		flex-wrap: wrap;
		border-radius: 15upx;
	}
	.ppflli{
		margin-top: 20upx;
		padding: 5upx 30upx;
		/* font-size: 18upx; */
		font-size: 27upx;
		background-color: #f0f2f5;
		border-radius: 5upx;
	}
	.innerMaskBottom{
		width: 100%;
		position: absolute;
		height: 80upx;
		bottom: 0;
		left: 0;
		
	}
	.innerMaskBottom button{
		height: 80upx;
		line-height: 80upx;
		width: 50%;		
		border: none;
		outline: none;
		border-radius: 0;
	}
	.innerMaskBottom1{

		background-color: #d2d2d2;
		color: #666666;
		font-size: 21upx
	}
	.innerMaskBottom2{
		background-color: #ff4300;
		color: #FFFFFF;		
		font-size: 21upx
	}
	
	.jgInput{
		padding-left: 28upx;
		display: flex;
		flex-direction: row;
	}
	.jgInput input{
		border: none;
		border-radius: 5upx;
		text-align: center;
		background-color: #f0f2f5;
		width: 162upx;
		height: 43upx;
	}
	.inputC{
		position: relative;
		top: -5upx;
		padding: 0 15upx;
	}
	.sx{
		width: 30upx;
		height: 30upx;
		position: relative;
		top: 8upx;
		left: 5upx;
	}
	.xj{
		width: 20upx;
		height: 20upx;
		position: relative;
		top: 2upx;
		left: 5upx;
	}
	.mt{
		margin-top: 20upx;
	}
	.active1{
		color: #fff;
		background-color: #ff4300;
	}
	.active2{
		color: #fff;
		background-color: #ff4300;
	}
	.active11{
		color: #ff4300;
	}
	
	
	.fs30{
		/* font-size: 30upx */
		font-size: 45upx
	}
	.fs26{
		font-size:39upx
		/* font-size: 26upx */
	}
	.fs12{
		font-size: 18upx
		/* font-size: 12upx */
	}
	.fs16{
		font-size: 24upx
		/* font-size: 16upx */
	}
	.fs14{
		font-size: 21upx
		/* font-size: 14upx */
	}
	.fs15{
		font-size: 22.5upx
		/* font-size: 15upx */
	}
	.fs27{
		font-size: 40.5upx
		/* font-size: 27upx */
	}
	.fs18{
		font-size: 27upx
		/* font-size: 18upx */
	}
	.fs28{
		font-size: 42upx
		/* font-size: 28upx */
	}
	.fs10{
		font-size: 15upx
		/* font-size: 10upx */
	}
	.fs30{
		font-size: 45upx
		/* font-size: 28upx */
	}
	.fs24{
		font-size: 36upx
		/* font-size: 24upx */
	}
	.fs20{
		font-size:30upx
		/* font-size: 20upx */
	}
	.fs22{
		font-size:33upx
		/* font-size: 22upx */
	}
	.fs21{
		font-size: 31.5upx
		/* font-size: 21upx */ 
	}
</style>
